<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商网站导航菜单 - elementContains实战应用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: #f5f5f5;
        }

        .header {
            background-color: #2c3e50;
            color: white;
            padding: 15px 0;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .nav-container {
            position: relative;
        }

        .main-nav {
            display: flex;
            list-style: none;
        }

        .nav-item {
            position: relative;
            margin-right: 20px;
        }

        .nav-link {
            color: white;
            text-decoration: none;
            padding: 10px 15px;
            display: block;
            cursor: pointer;
        }

        .nav-link:hover {
            background-color: #34495e;
        }

        .dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            background-color: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            min-width: 200px;
            display: none;
            z-index: 100;
        }

        .dropdown.active {
            display: block;
        }

        .dropdown-item {
            padding: 10px 15px;
            display: block;
            color: #333;
            text-decoration: none;
            border-bottom: 1px solid #eee;
        }

        .dropdown-item:hover {
            background-color: #f5f5f5;
        }

        .content {
            padding: 30px 0;
        }

        .card {
            background-color: white;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        .status-message {
            margin-top: 20px;
            padding: 10px;
            background-color: #e7f5fe;
            border-left: 4px solid #2396ef;
            border-radius: 3px;
        }
    </style>
</head>

<body>
    <header class="header">
        <div class="container">
            <div class="nav-container">
                <ul class="main-nav">
                    <li class="nav-item" data-dropdown="products">
                        <a class="nav-link">产品分类</a>
                        <div class="dropdown" id="products-dropdown">
                            <a href="#" class="dropdown-item">手机</a>
                            <a href="#" class="dropdown-item">电脑</a>
                            <a href="#" class="dropdown-item">家电</a>
                            <a href="#" class="dropdown-item">配件</a>
                        </div>
                    </li>
                    <li class="nav-item" data-dropdown="services">
                        <a class="nav-link">客户服务</a>
                        <div class="dropdown" id="services-dropdown">
                            <a href="#" class="dropdown-item">售后政策</a>
                            <a href="#" class="dropdown-item">在线客服</a>
                            <a href="#" class="dropdown-item">服务网点</a>
                            <a href="#" class="dropdown-item">帮助中心</a>
                        </div>
                    </li>
                    <li class="nav-item" data-dropdown="account">
                        <a class="nav-link">我的账户</a>
                        <div class="dropdown" id="account-dropdown">
                            <a href="#" class="dropdown-item">个人信息</a>
                            <a href="#" class="dropdown-item">我的订单</a>
                            <a href="#" class="dropdown-item">我的收藏</a>
                            <a href="#" class="dropdown-item">退出登录</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </header>

    <div class="container">
        <div class="content">
            <div class="card">
                <h2>电商网站导航菜单 - elementContains实战应用</h2>
                <p>这个示例展示了如何使用elementContains方法来实现一个实用的导航菜单系统。</p>
                <p>功能特点：</p>
                <ul>
                    <li>点击菜单项显示下拉菜单</li>
                    <li>点击菜单区域外自动关闭菜单</li>
                    <li>使用elementContains方法判断点击是否在菜单区域内</li>
                </ul>
                <div class="status-message" id="status-message">
                    请尝试点击上方的导航菜单，然后点击页面其他区域观察效果
                </div>
            </div>
        </div>
    </div>

    <script>
        // elementContains方法定义 - 判断父元素是否包含子元素
        const elementContains = (parent, child) =>
            parent !== child && parent.contains(child);

        // 获取所有导航项和状态消息元素
        const navItems = document.querySelectorAll('.nav-item');
        const statusMessage = document.getElementById('status-message');
        let activeDropdown = null;

        // 为每个导航项添加点击事件
        navItems.forEach(item => {
            const dropdownId = item.getAttribute('data-dropdown');
            const dropdown = document.getElementById(`${dropdownId}-dropdown`);

            item.addEventListener('click', (e) => {
                e.stopPropagation(); // 阻止事件冒泡

                // 如果当前下拉菜单已经是激活状态，则关闭它
                if (dropdown.classList.contains('active')) {
                    dropdown.classList.remove('active');
                    activeDropdown = null;
                    statusMessage.textContent = `${dropdownId}菜单已关闭`;
                } else {
                    // 关闭其他可能打开的下拉菜单
                    if (activeDropdown) {
                        activeDropdown.classList.remove('active');
                    }

                    // 打开当前下拉菜单
                    dropdown.classList.add('active');
                    activeDropdown = dropdown;
                    statusMessage.textContent = `${dropdownId}菜单已打开`;
                }
            });
        });

        // 点击页面任何地方关闭下拉菜单
        document.addEventListener('click', (e) => {
            if (activeDropdown) {
                // 使用elementContains方法判断点击是否在当前活动的下拉菜单区域外
                const clickedInsideDropdown = elementContains(
                    activeDropdown.parentElement, // 导航项元素
                    e.target // 被点击的元素
                );

                // 如果点击在下拉菜单区域外，则关闭下拉菜单
                if (!clickedInsideDropdown) {
                    activeDropdown.classList.remove('active');
                    statusMessage.textContent = '菜单已关闭 - 点击在菜单区域外';
                    activeDropdown = null;
                }
            }
        });

        // 为下拉菜单项添加点击事件
        document.querySelectorAll('.dropdown-item').forEach(item => {
            item.addEventListener('click', (e) => {
                e.stopPropagation(); // 阻止事件冒泡
                const itemText = e.target.textContent;
                statusMessage.textContent = `您选择了: ${itemText}`;

                // 关闭下拉菜单
                if (activeDropdown) {
                    activeDropdown.classList.remove('active');
                    activeDropdown = null;
                }
            });
        });
    </script>
</body>

</html>